<template>
  <div class="w-100p u-flex">
    <u-input
      :value="inputValue"
      :placeholder-style="placeholderStyle"
      :custom-style="inputStyle"
      :placeholder="placeholder"
      @click="show = true"
      type="select"
    />
    <view class="m-l-10" v-if="inputValue && clearable"><u-icon class="close-icon" name="close" @click="close" /></view>

    <u-popup mode="bottom" v-model="show" :mask-close-able="false">
      <view class="popup-content">
        <view class="u-flex u-row-between u-p-b-30">
          <u-button :hair-line="false" :custom-style="cancelStyle" throttle-time="500" @click="cancel">取消</u-button>
          <u-button :hair-line="false" :custom-style="submitStyle" throttle-time="500" @click="submit">确定</u-button>
        </view>
        <view class="u-p-b-20">
          <u-search
            :placeholder="placeholder"
            v-model="filterText"
            shape="square"
            bg-color="#E5EAE8"
            height="80"
            :show-action="true"
            :animation="true"
            :input-style="{ marginLeft: '20rpx' }"
            :search-icon="searchIcon"
            placeholder-color="#999999"
            :action-style="{
              color: '#369164',
              fontSize: '14px',
              fontWeight: '400',
            }"
          ></u-search>
        </view>
        <scroll-view scroll-y="true" style="height: 600rpx">
          <view class="w-100p checkbox">
            <u-radio-group active-color="#9AC8B1" width="100%" :wrap="true" v-model="radioValue">
              <u-radio
                @change="radioChange"
                class="radio-item"
                v-for="(item, index) in filterList"
                :key="index"
                :name="item[valueKey]"
                >{{ item.name }}</u-radio
              >
            </u-radio-group>

            <template v-if="filterList.length === 0">
              <view class="c-empty p-absolute-center">
                <u-empty text="暂无数据"></u-empty>
              </view>
            </template>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </div>
</template>
<script>
export default {
  naem: "bSelect",
  props: {
    placeholder: String,
    placeholderStyle: String,
    inputStyle: Object,
    cancelStyle: Object,
    submitStyle: Object,
    searchIcon: String,
    options: {
      type: Array,
      default: () => [],
    },
    value: String,
    valueKey: {
      type: String,
      default: "dataCode",
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      inputValue: "",
      show: false,
      filterText: "",
      checkList: [],
      radioValue: "",
    };
  },
  watch: {
    options(val) {
      if (val && this.value) {
        let textList = [];
        val.forEach((item) => {
          if (this.value === item[this.valueKey]) {
            textList = [item.name];
            this.checkList = [item[this.valueKey]];
          }
        });
        this.inputValue = textList.toString();
        this.radioValue = this.checkList.toString();
      }
    },
    value(val) {
      if (val && this.options) {
        let textList = [];
        this.options.forEach((item) => {
          if (val === item[this.valueKey]) {
            textList = [item.name];
            this.checkList = [item[this.valueKey]];
          }
        });
        this.inputValue = textList.toString();
        this.radioValue = this.checkList.toString();
      } else {
        this.inputValue = "";
        this.radioValue = "";
        this.$emit("input", "");
      }
    },
  },
  computed: {
    filterList() {
      return this.options.filter((item) => {
        if (this.filterText) {
          return item.name?.includes(this.filterText) || item.pinyinCode?.includes(this.filterText.toUpperCase());
        }
        return true;
      });
    },
  },
  methods: {
    radioChange(e) {
      this.checkList = [e];
      this.radioValue = e;
    },
    submit() {
      let textList = [];
      this.options.forEach((item) => {
        if (this.checkList[0] === item[this.valueKey]) {
          textList = [item.name];
        }
      });
      this.inputValue = textList.toString();
      this.$emit("input", this.checkList.toString());
      this.show = false;
    },
    cancel() {
      this.options.forEach((item) => {
        if (this.value === item[this.valueKey]) {
          this.checkList = [item[this.valueKey]];
        }
      });
      this.radioValue = this.checkList[0];
      this.filterText = "";
      this.show = false;
    },
    close() {
      this.inputValue = "";
      this.radioValue = "";
      this.$emit("input", "");
    },
  },
};
</script>
<style lang="scss" scoped>
.popup-content {
  padding: 24rpx;
  text-align: center;

  .checkbox {
    &-item {
      height: 100rpx;
    }

    /deep/.u-radio-group {
      display: inline;
      .u-radio__label {
        text-align: left;
        flex: 1;
      }
      .u-radio {
        border-bottom: 1px solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;
        height: 90rpx;

        .u-radio__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }
  }
}
/deep/ .u-input__input {
  padding-left: 20rpx !important;
}
</style>
